<template>
<div class="data">
    <span>共有{{length}}条数据&nbsp;当前分页{{currentPage}}/{{Math.ceil(length/18)}}</span>
</div>
<div class="block">
  <el-pagination
    layout="prev, pager, next"
    :pager-count="5"
    v-model:currentPage="currentPage"
    :total="Math.ceil(length/18)*10"
    :hide-on-single-page="true"
    @click="click"
    >
  </el-pagination>    
</div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
export default {
    props:{
        length:{
            type:Number,
            default:181
        },
        isSearch:{
            type:Boolean,
            default:false
        },
        key:{
            type:String,
            default:''
        }
    },
    emits:['refesh'],
    setup(props,context){
        const state = reactive({
            currentPage:1
        })
        const click = ()=>{
            let url = ''
            if (props.isSearch) {//search页面使用
                url = `/index.php?m=vod-search-pg-${state.currentPage}-wd-${props.key}.html`
            }
            else{//其它页面分页使用
                url = `/?m=vod-type-id-1-pg-${state.currentPage}.html` 
            }
            context.emit('refesh',url)
        }
        return{
            ...toRefs(state),
            click
        }
    }
}
</script>

<style lang="less">
.data{
    text-align: center;
    span{
        color: #999;
    }   
}
.block{
    margin-top: 15px;
    padding-bottom: 30px;
    margin: 15px 0 0 10px;
    .el-pagination{
        .number{
            background: #222;
            border-radius: 5px;
            color: #999;
            border: 1px solid #333;
        }
        .active{
            color: #fff;
        }
    }
}
</style>